<!--组件.vue-->
<script setup lang="ts">
import { ref } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
// vue3导入组件是不需要用component注册的
// 导入完成后如果项目本身是在运行的记得重新编译项目，不然会报错，如npm run dev
const listData = ref([
  {
    Connected: true,
    StationName: '油箱托架',
    EquipmentName: 'VISION-4',
    Torque: '320Nm',
    Angle: '98°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:20',
  },
  {
    Connected: true,
    StationName: '平衡轴',
    EquipmentName: 'VISION-9L01',
    Torque: '420Nm',
    Angle: '89°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:30',
  },
  {
    Connected: true,
    StationName: '平衡轴',
    EquipmentName: 'VISION-9L02',
    Torque: '320Nm',
    Angle: '92°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:25',
  },
  {
    Connected: true,
    StationName: '平衡轴',
    EquipmentName: 'VISION-9R',
    Torque: '270Nm',
    Angle: '87°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:23',
  },
  {
    Connected: true,
    StationName: '平衡轴',
    EquipmentName: 'VISION-9M',
    Torque: '450Nm',
    Angle: '80°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:28',
  },
  {
    Connected: true,
    StationName: '前桥U型',
    EquipmentName: 'TWIN-17',
    Torque: '720Nm',
    Angle: '90°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:50',
  },
  {
    Connected: true,
    StationName: '前板簧销拧紧',
    EquipmentName: 'VISION-4',
    Torque: '920Nm',
    Angle: '82°',
    status: 'ok',
    Alarm: true,
    Time: '08:45:20',
  },
  {
    Connected: true,
    StationName: '单后桥U型螺栓',
    EquipmentName: 'TWIN-20',
    Torque: '820Nm',
    Angle: '89°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:40',
  },
  {
    Connected: true,
    StationName: '后板簧销、减震器拧紧 ',
    EquipmentName: 'VISION-22',
    Torque: '620Nm',
    Angle: '88°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:24',
  },
  {
    Connected: true,
    StationName: '前悬扭杆机构拧紧',
    EquipmentName: 'SC022317002',
    Torque: '220Nm',
    Angle: '96°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:27',
  },
  {
    Connected: true,
    StationName: '鞍座',
    EquipmentName: 'VISION-4',
    Torque: '220Nm',
    Angle: '98°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:50',
  },
  {
    Connected: true,
    StationName: '传动轴与后桥',
    EquipmentName: 'SC022311008',
    Torque: '220Nm',
    Angle: '89°',
    status: 'ok',
    Alarm: true,
    Time: '08:42:23',
  },
  {
    Connected: true,
    StationName: '传动轴吊挂',
    EquipmentName: 'SC022317002',
    Torque: '280Nm',
    Angle: '92°',
    status: 'ok',
    Alarm: true,
    Time: '08:40:12',
  },
  {
    Connected: true,
    StationName: '转向器输入轴',
    EquipmentName: 'CONNECT-38',
    Torque: '68Nm',
    Angle: '87°',
    status: 'ok',
    Alarm: true,
    Time: '08:48:32',
  },
  {
    Connected: true,
    StationName: '轮胎螺栓拧紧',
    EquipmentName: 'TWIN-43L',
    Torque: '480Nm',
    Angle: '80°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:43',
  },
  {
    Connected: true,
    StationName: '轮胎螺栓',
    EquipmentName: 'TWIN-43R',
    Torque: '467Nm',
    Angle: '80°',
    status: 'ok',
    Alarm: true,
    Time: '08:43:21',
  },
  {
    Connected: true,
    StationName: '离合器压盘、高压线',
    EquipmentName: 'CONNECT-0101',
    Torque: '56Nm',
    Angle: '90°',
    status: 'ok',
    Alarm: true,
    Time: '08:45:12',
  },
  {
    Connected: true,
    StationName: '发动机与变速箱',
    EquipmentName: 'CONNECT-0102',
    Torque: '60Nm',
    Angle: '82°',
    status: 'ok',
    Alarm: true,
    Time: '08:41:32',
  },
  {
    Connected: true,
    StationName: '发动机与变速箱',
    EquipmentName: 'CONNECT W',
    Torque: '65Nm',
    Angle: '89°',
    status: 'ok',
    Alarm: true,
    Time: '08:46:13',
  },
]);
const isScroll = ref(true);
</script>
<template>
  <div class="contain">
    <!-- <el-card shadow="never"> -->
    <div class="monitor panel">
      <div style="height: 95%; overflow: hidden">
        <div class="content" style="display: block">
          <div class="head">
            <span class="col" style="width: 15%">设备开启状态</span>
            <span class="col" style="width: 10%">工位名称</span>
            <span class="col" style="width: 10%">设备名称</span>
            <span class="col" style="width: 10%">扭矩</span>
            <span class="col" style="width: 10%">角度</span>
            <span class="col" style="width: 10%">连接状态</span>
            <span class="col" style="width: 10%">拧紧结果</span>

            <span class="col" style="width: 10%">报警状态</span>
            <span class="col" style="width: 15%">记录时间</span>
          </div>
        </div>
        <div class="seamlessRolling">
          <Vue3SeamlessScroll
            v-model="isScroll"
            class="scroll"
            :list="listData"
            :step="0.3"
            :hover="true"
            :limit-scroll-num="3"
            :wheel="true"
          >
            <ul>
              <li v-for="(item, index) in listData" :key="index" class="row">
                <span class="col" style="width: 15%; font-size: 30px">
                  <el-icon>
                    <Open />
                  </el-icon>
                </span>
                <span class="col" style="width: 10%">
                  {{ item.StationName }}
                </span>
                <span class="col" style="width: 10%">{{ item.EquipmentName }}</span>
                <span class="col" style="width: 10%">{{ item.Torque ? item.Torque : 'null' }}</span>
                <span class="col" style="width: 10%">{{ item.Angle ? item.Angle : 'null' }}</span>
                <span class="col" style="width: 10%">{{ item.Connected ? 'ON' : 'OFF' }}</span>
                <span class="col" style="width: 10%">{{ item.status }}</span>
                <span class="col" style="width: 10%"><span :class="item.Alarm ? 'bgdccc' : 'bgdref'"></span></span>
                <span class="col" style="width: 15%">{{ item.Time }}</span>
              </li>
            </ul>
          </Vue3SeamlessScroll>
        </div>
      </div>
    </div>

    <!-- </el-card> -->
  </div>
</template>
<style lang="less" scoped>
.contain {
  width: 97%;
  margin: 10px auto;
  border-radius: 10px;
  height: 620px;
  overflow: hidden;
  background: url('@/assets/images/53bg.png') no-repeat;
  background-size: 100% 100%;
}

/* 监控 */
.monitor {
  box-sizing: border-box;
}

.monitor .content {
  flex: 1;
  display: none;
  position: relative;
}

.monitor .head {
  background: rgb(255 255 255 / 10%);
  font-size: 20px;
  padding: 0.5rem 1.5rem;
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  text-align: center;
  color: #ffd700 !important;
  text-shadow: 0 0 25px #00fbfe;
}

.monitor .row {
  line-height: 1.05;
  padding: 0.5rem 1.5rem;
  font-size: 16px;
  position: relative;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}

.monitor .row:hover {
  background: rgb(255 255 255 / 10%);
}

@media screen and (width >= 2000px) {
  html {
    font-size: 40px;
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-359deg);
  }
}

.on {
  background-color: green;
  padding: 5px 10px;
  color: #fff !important;
  border-radius: 3px;
}

.off {
  background-color: red;
  padding: 5px 10px;
  color: #fff !important;
  border-radius: 3px;
}

.green {
  color: green;
}

.bgdccc {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #ccc;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}

.bgdref {
  width: 1.5rem;
  height: 1.5rem;
  background-color: red;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}
</style>
